<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>async函数和await_解决回调函数地狱</title>
</head>

<body>
  <form>
    <span>省份：</span>
    <select>
      <option class="province"></option>
    </select>
    <span>城市：</span>
    <select>
      <option class="city"></option>
    </select>
    <span>地区：</span>
    <select>
      <option class="area"></option>
    </select>
  </form>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
// ：await必须用在async修饰的函数内（await会阻止"异步函数内"代码继续执行，原地等待结果）
async function getData() {
    const pOBJ= await axios({url:'http://hmajax.itheima.net/api/province'})
    const pname=pOBJ.data.list[0]
    const cOBJ= await axios({url:'http://hmajax.itheima.net/api/city',params:{pname}})
    const cname=cOBJ.data.list[0]
    const aOBJ= await axios({url:'http://hmajax.itheima.net/api/area',params:{pname,cname}})
    const aname=aOBJ.data.list[0]
    document.querySelector('.province').innerHTML=pname
    document.querySelector('.city').innerHTML=cname
    document.querySelector('.area').innerHTML=aname

}
getData()
  </script>
</body>

</html>